<html>
  <head>
    <title>Comparing a couple of subjectivity images</title>
    <style>
body { margin: 0; padding: 0; }
.outerFrame { margin: auto auto; }
.innerFrame { margin: auto auto; border: 2px inset #333; padding: 0; overflow: hidden; max-width: 100%; max-height: 500px;}
.zoomButtons { padding: 2px 5px; background: white; width: 150px; text-align: center; }
#page { width: 100%; height: 100%; }
#header { width: 100%; height: 100px; border-top: 1px solid grey; background: #ccc; padding: 20px; }
#left { width: 45%; background: #808080; padding: 20px; }
#gutter { width: 10%; background: #ccc; padding: 20px; }
#right { width: 45%; background: #808080; padding: 20px; }
    </style>
    <script src='/javascripts/image_view_helper.js'></script>
  </head>
  <body onmousemove='drag(event)' onmouseup='dragStop()' onload='init()'>
<!--    <div id='marker' style='position: absolute; top: 0; left: 0; width: 10px; height: 10px; background: red; '></div> -->
    <table cellspacing='0' id='page'>
      <tr>
        <td id='header' colspan='3'>Header thing</td>
      </tr>
      <tr>
        <td id='left' valign='middle'>
          <div class='innerFrame' style='width: 100%; ' id='leftFrame'><img src='/image_facts/show_raw/9520' style='width: 100%;' id='leftImg'
              onmousedown='dragStart("left", event)'></div>
        </td>
        <td id='gutter'>
          gutter
        </td>
        <td id='right' valign='middle'>
          <div class='innerFrame' style='width: 100%; ' id='rightFrame'><img src='/image_facts/show_raw/35' style='width: 100%;' id='rightImg'
              onmousedown='dragStart("right", event)'></div>
        </td>
      </tr>
    </table>
  </body>
</html>